<template>
  <view class="apply-container">
    <!-- 导航栏 -->
    <uni-nav-bar
      title="商家入驻申请"
      left-icon="back"
      @click-left="goBack"
      fixed
    />

    <scroll-view class="scroll-content" scroll-y>
      <!-- 顶部横幅 -->
      <view class="banner"> </view>

      <!-- 流程步骤 -->
      <view class="steps-container">
        <!-- 步骤1 -->
        <view class="step-item">
          <view class="step-left">
            <view class="step-number">1</view>
            <view class="step-line"></view>
          </view>
          <view class="step-right">
            <view class="step-title">查询创客信息</view>
            <view class="step-desc">
              输入创客工号进行查询，获取创客邀请码
            </view>
          </view>
        </view>

        <!-- 步骤2 -->
        <view class="step-item">
          <view class="step-left">
            <view class="step-number">2</view>
            <view class="step-line"></view>
          </view>
          <view class="step-right">
            <view class="step-title">填写入驻资料</view>
            <view class="step-desc">
              填写店铺基本信息、法人信息、证照资料和店铺照片
            </view>
          </view>
        </view>

        <!-- 步骤3 -->
        <view class="step-item">
          <view class="step-left">
            <view class="step-number">3</view>
            <view class="step-line"></view>
          </view>
          <view class="step-right">
            <view class="step-title">等待审核通过</view>
            <view class="step-desc"> 等待平台审核通过并开通相关功能 </view>
          </view>
        </view>

        <!-- 步骤4 -->
        <view class="step-item last">
          <view class="step-left">
            <view class="step-number">4</view>
          </view>
          <view class="step-right">
            <view class="step-title">开店成功</view>
            <view class="step-desc"> 审核通过后即可登录开始经营 </view>
          </view>
        </view>
      </view>

      <!-- 协议部分 -->
      <view class="agreement-container">
        <view class="agreement-checkbox" @click="toggleAgreement">
          <view class="checkbox" :class="{ checked: agreed }">
            <uni-icons
              v-if="agreed"
              type="checkmarkempty"
              size="16"
              color="#fff"
            />
          </view>
          <text class="agreement-text">
            我已阅读并同意
            <text class="link" @click.stop="viewAgreement('service')">
              《我店惠盟商户服务协议》
            </text>
            <text class="link" @click.stop="viewAgreement('privacy')">
              《我店惠盟隐私政策》
            </text>
          </text>
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-container">
        <uni-button class="submit-btn" type="primary" @click="handleSubmit">
          我已知晓
        </uni-button>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 是否同意协议
const agreed = ref(false);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 切换协议勾选状态
const toggleAgreement = () => {
  agreed.value = !agreed.value;
};

// 查看协议
const viewAgreement = (type) => {
  const title = type === "service" ? "商户服务协议" : "隐私政策";
  uni.showToast({
    title: `查看${title}`,
    icon: "none",
  });
};

// 提交申请
const handleSubmit = () => {
  if (!agreed.value) {
    uni.showToast({
      title: "请先阅读并同意协议",
      icon: "none",
    });
    return;
  }

  uni.navigateTo({
    url: "/pages/login/partner/applyForm",
  });
};
</script>

<style scoped lang="scss">
.apply-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.scroll-content {
  flex: 1;
  height: calc(100vh - 88rpx);
}

// 顶部横幅
.banner {
  width: 100%;
  height: 228rpx;
  background-image: url("/static/images/sjrz.png");
  background-size: cover;
  margin-bottom: 20rpx;
}

// 流程步骤
.steps-container {
  padding: 0 40rpx;
  margin-bottom: 40rpx;
}

.step-item {
  display: flex;
  padding-bottom: 20rpx;

  &.last {
    padding-bottom: 0;

    .step-left {
      .step-line {
        display: none;
      }
    }
  }

  .step-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 30rpx;

    .step-number {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
      color: #fff;
      font-size: 32rpx;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .step-line {
      width: 2rpx;
      flex: 1;
      background-color: #ddd;
      margin-top: 20rpx;
      min-height: 80rpx;
    }
  }

  .step-right {
    flex: 1;
    padding-top: 8rpx;

    .step-title {
      font-size: 32rpx;
      font-weight: 700;
      color: #333;
      margin-bottom: 16rpx;
    }

    .step-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
    }
  }
}

// 协议部分
.agreement-container {
  margin: 0 40rpx 40rpx;
  border-radius: 20rpx;

  .agreement-checkbox {
    display: flex;
    align-items: flex-start;

    .checkbox {
      width: 32rpx;
      height: 32rpx;
      border: 2rpx solid #ddd;
      border-radius: 6rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16rpx;
      flex-shrink: 0;
      margin-top: 4rpx;
      transition: all 0.3s;

      &.checked {
        background-color: #ffa726;
        border-color: #ffa726;
      }
    }

    .agreement-text {
      flex: 1;
      font-size: 24rpx;
      color: #333;
      line-height: 1.6;

      .link {
        color: #ffa726;
        text-decoration: underline;
      }
    }
  }
}

// 提交按钮
.submit-container {
  padding: 0 40rpx 60rpx;

  .submit-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #ffa726 0%, #ff9800 100%);
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      border: none;
    }

    &[disabled] {
      background: #ddd;
      color: #999;
    }
  }
}
</style>
